<template>
  <div>
    <el-dialog title="新增p2p订单" :visible.sync="dialogFormVisible" :before-close="close" :close-on-click-modal="false">
      <el-form :model="form" ref="form"  :rules="rules" class="form">
        <el-form-item label="p2p商家订单id" :label-width="formLabelWidth" prop="orderIdPartner">
          <el-col :span="14">
            <el-input v-model="form.orderIdPartner" auto-complete="off"></el-input>
          </el-col>
          <el-col :span="10" style="padding-left: 10px"></el-col>
        </el-form-item>
        <el-form-item label="用户手机号" :label-width="formLabelWidth" prop="userMobile">
          <el-col :span="14">
            <el-input v-model="form.userMobile" auto-complete="off"></el-input>
          </el-col>
          <el-col :span="10" style="padding-left: 10px"></el-col>
        </el-form-item>
        <el-form-item label="请选择P2P商家" :label-width="formLabelWidth" >
          <el-col :span="14">
            <el-select v-model="form.companyId" placeholder="请选择"  @change="getProductList" style="width:300px">
              <el-option
                v-for="item in companyOptions"
                :key="item.companyId"
                :label="item.companyName"
                :value="item.companyId">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="10" style="padding-left: 10px"></el-col>
        </el-form-item>
        <el-form-item label="投资项目名称" :label-width="formLabelWidth">
          <el-col :span="14">
            <el-select v-model="form.productId" placeholder="请选择" style="width:300px">
              <el-option
                v-for="item in productOptions"
                :key="item.productId"
                  :label="item.projectType"
                :value="item.productId">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="10" style="padding-left: 10px"></el-col>
        </el-form-item>
        <el-form-item label="投资期限" :label-width="formLabelWidth" prop="productTerm">
          <el-col :span="14">
            <el-input v-model="form.productTerm" auto-complete="off"></el-input>
          </el-col>
          <el-col :span="10" style="padding-left: 10px">天</el-col>
        </el-form-item>
        <el-form-item label="投资时间" :label-width="formLabelWidth" prop="orderTime">
          <el-col :span="14">
            <el-date-picker
              v-model="form.orderTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions1">
            </el-date-picker>
          </el-col>
          <el-col :span="10" style="padding-left: 10px"></el-col>
        </el-form-item>
        <el-form-item label="投资金额" :label-width="formLabelWidth" prop="productRealPayFee">
          <el-col :span="14">
            <el-input v-model="form.productRealPayFee" auto-complete="off"></el-input>
          </el-col>
          <el-col :span="10" style="padding-left: 10px">元</el-col>
        </el-form-item>
        <el-form-item label="返利金额" :label-width="formLabelWidth" prop="productCommission">
          <el-col :span="14">
            <el-input v-model="form.productCommission" auto-complete="off"></el-input>
          </el-col>
          <el-col :span="10" style="padding-left: 10px">元</el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { companySelectList } from 'api/business'
  import { productList } from 'api/product'
  import { orderPartnerSave } from 'api/order'
  import { rules } from '../../config'
  export default {
    props: ['id'],
    data() {
      return {
        pickerOptions1: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '前天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 2)
              picker.$emit('pick', date)
            }
          }]
        },
        retailersOptions: [],
        companyOptions: [],
        productOptions: [],
        dialogFormVisible: true,
        form: {
          orderIdPartner: '',
          orderTime: '',
          companyId: '',
          userMobile: '',
          productId: '',
          productTerm: '',
          productRealPayFee: '',
          productCommission: ''
        },
        rules: rules,
        formLabelWidth: '200px'
      }
    },
    created() {
      this.getBusinessList()
      this.getProductList()
    },
    methods: {
      close() {
        this.$emit('close')
      },
      async submit() {
        console.log(' will start to submit ')
        this.$refs['form'].validate(async(valid) => {
          console.log(' will start valid ')
          if (valid) {
            console.log(' pass valid ')
            if (this.form.companyId === '' || this.form.companyId === null) {
              this.$alert('请选择p2p商家！', '提示')
              return false
            }
            if (this.form.productId === '' || this.form.productId === null) {
              this.$alert('请选择产品！', '提示')
              return false
            }

            try {
              let back = await orderPartnerSave(this.form)
              back = back.data
              if (back.resultCode === '200') {
                // this.$alert('保存成功', '提示')
                this.$emit('update')
                this.close()
              } else {
                this.$alert(back.msg, '提示')
              }
            } catch (err) {
              this.$alert('请求出错', '提示')
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      async getBusinessList() {
        try {
          let back = await companySelectList()
          back = back.data
          if (back.resultCode === '200') {
            this.companyOptions = back.result
          }
        } catch (err) {
          this.$alert('请求出错', '提示')
        }
      },
      // 获取列表
      async getProductList() {
        const parm = {
          pageSize: 10000,
          curPage: 0,
          productType: '1',
          companyId: this.form.companyId,
          investType: ''
        }
        console.log(parm)
        try {
          let back = await productList(parm)
          back = back.data
          if (back.resultCode === '200') {
            this.productOptions = back.result
          } else {
            this.$alert(back.msg, '提示')
          }
        } catch (err) {
          this.$alert('请求出错', '提示')
        }
      }
    }
  }
</script>
<style lang="scss" scoped>

</style>
